<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/jqweui/lib/weui.min.css">
    <link rel="stylesheet" href="../../css/jqweui/css/jquery-weui.css">
    <link rel="stylesheet" href="../../css/jqweui/css/jqweui_extend.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_539359_q9xrtmlc8gp.css">
    <script src="../../script/plugins/jquery.min.js"></script>
    <link rel="stylesheet" href="../../script/plugins/swiper/css/swiper.min.css">
    <script src="../../script/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/plugins/in/in-min.js"></script>
    <script type="text/javascript" src="../../css/jqweui/js/in-config.js"></script>
    <script src="../../css/jqweui/js/jquery-weui.js"></script>
    <script src="../../css/jqweui/js/util.js"></script>
</head>
<body class="wrap">
<style>
    .cart-btn{
        font-size:24px;background:#04be02;color:#fff;display:block;width:40px;height:40px;text-align:center;line-height:40px;border-radius:50%;
    }
</style>
<section class="mc-view-box">
    <div class="mc-header-box">
        <header class="mc-header bg-black">
            <a href="javascript:;" onclick="api.closeWin();" class="head-icon">
                <i class="iconfont icon-arrow-left"></i>
            </a>
            <div class="main-box head-title">
                收银台
            </div>
            <a href="javascript:;"  class="head-icon">
                <i class="iconfont icon-liebiao3"></i>
            </a>
            <a href="javascript:;" tapmode="tap-active" onclick="openScanner();" class="head-icon">
                <i class="iconfont icon-qrCode"></i>
            </a>
        </header>
    </div>
    <div class="mc-scrollview">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="按货号进行搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>按货号进行检索</span>
                </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>
        <div class="weui-panel weui-panel_access">
            <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="../../image/01.jpg">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">春秋款薄被这里是商品名称</h4>
                        <p class="weui-media-box__desc">货号：21321432421<br>蓝色，1800*2000mm</p>
                        <p class="weui-media-box__desc"></p>
                    </div>
                    <div class="weui-media-box__ft">
                        <a href="javascript:;" onclick="skulayer(this)" class="iconfont icon-gouwugouwuchedinggou cart-btn"></a>
                    </div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="../../image/02.jpg">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">粉红回忆套装</h4>
                        <p class="weui-media-box__desc">货号：21321432421<br>粉色，1800*2000mm</p>
                        <p class="weui-media-box__desc"></p>
                    </div>
                    <div class="weui-media-box__ft">
                        <a href="javascript:;" onclick="skulayer(this)" class="iconfont icon-gouwugouwuchedinggou cart-btn"></a>
                    </div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="../../image/03.jpg">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">新婚套装</h4>
                        <p class="weui-media-box__desc">货号：21321432421<br>红色，1800*2000mm</p>
                        <p class="weui-media-box__desc"></p>
                    </div>
                    <div class="weui-media-box__ft">
                        <a href="javascript:;" onclick="skulayer(this)" class="iconfont icon-gouwugouwuchedinggou cart-btn"></a>
                    </div>
                </div>
            </div>
        </div>
        <div id='sys-info'></div>
    </div>
    <footer class="mc-footer-box">
        <div class="mc-footer mc-shop-footer">
            <a href="javascript:;" class="item-icon">
                <span class="weui-badge" style="position:absolute;top: -.4em;right:5px;background:#04be02">8</span>
                <i class="iconfont icon-gouwugouwuchedinggou"></i>
            </a>
            <a href="cart.html" class="item-link bg-success">
                ￥<span id="total-money">3000.98</span>
            </a>
        </div>
    </footer>
</section>
<script type="text/html" id="sku-tpl">
    <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" src="../../image/01.jpg">
            </div>
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">春秋款薄被这里是商品名称</h4>
                <p class="weui-media-box__desc">规格：蓝色，1800*2000mm</p>
                <p class="weui-media-box__desc">库存：198 件</p>
            </div>
            <div class="weui-media-box__ft">
                <div class="weui-count">
                    <a class="weui-count__btn weui-count__decrease"></a>
                    <input class="weui-count__number" type="number" value="1" />
                    <a class="weui-count__btn weui-count__increase"></a>
                </div>
            </div>
        </div>
        <div class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" src="../../image/01.jpg">
            </div>
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">春秋款薄被这里是商品名称</h4>
                <p class="weui-media-box__desc">规格：红色，1800*2000mm</p>
                <p class="weui-media-box__desc">库存：120 件</p>
            </div>
            <div class="weui-media-box__ft">
                <div class="weui-count">
                    <a class="weui-count__btn weui-count__decrease"></a>
                    <input class="weui-count__number" type="number" value="1" />
                    <a class="weui-count__btn weui-count__increase"></a>
                </div>
            </div>
        </div>
        <div class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" src="../../image/01.jpg">
            </div>
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">春秋款薄被这里是商品名称</h4>
                <p class="weui-media-box__desc">规格：蓝色，1800*2000mm</p>
                <p class="weui-media-box__desc">库存：10 件 <span class="text-color-1">库存紧张</span></p>
            </div>
            <div class="weui-media-box__ft">
                <div class="weui-count">
                    <a class="weui-count__btn weui-count__decrease"></a>
                    <input class="weui-count__number" type="number" value="1" />
                    <a class="weui-count__btn weui-count__increase"></a>
                </div>
            </div>
        </div>
    </div>
</script>
<script src="../../script/api.js"></script>
<script src="../../script/app.js"></script>
<script>
    var MAX = 99, MIN = 1;
    $(document).on('click','.weui-count__decrease',function (e) {
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") - 1
        if (number < MIN) number = MIN;
        $input.val(number)
    })
    $(document).on('click','.weui-count__increase',function (e) {
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") + 1
        if (number > MAX) number = MAX;
        $input.val(number)
    })
    function skulayer() {
        In('layer','template',function () {
            var html=template('sku-tpl',{});
            layer.open({
                type: 1
                ,content:html
                ,anim: 'up'
                ,style: 'position:fixed; bottom:48px;left:0; width: 100%; height:300px; padding:10px 0; border:none;'
            });
        });
    }
    function openScanner() {
        var scanner = api.require('scanner');
        scanner.open(function(ret,err) {
            api.alert({
                title: '扫描结果',
                msg: ret.msg
            });
        });
    }
</script>
</body>
</html>
